<template>
  <div>
    <a-modal :visible="visible" :destroyOnClose="true" title="新建标签" @ok="submit" @cancel="close">
      <a-form-model ref="ruleForm">
        <a-form-model-item label="会员标签名称" required>
          <a-input v-model="memberName" placeholder="" allowClear :max-length="15" />
          <p class="tip" v-if="showName">请输入标签名称</p>
        </a-form-model-item>
        <a-form-model-item label="导入数据" required>
          <a-button type="primary" @click="handleImportXls">导入</a-button>
          <div v-if="fileName">{{ fileName }}</div>
          <p class="tip" v-if="showFile">请导入文件</p>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <j-import-modal ref="importModal" :url="getImportUrl()" :uploadParams="getUploadParams()" @ok="importOk" :templateUrl="templateUrl()" :serviceId="6"></j-import-modal>
  </div>
</template>
<script>
import JImportModal from '@/components/qiniuUpload/JImportModal'
import globalData from '@/assets/js/common'
import { queryUploadSuccess } from '@/components/qiniuUpload/common'
import { marketingMemberAdd } from '@/api/box/member'
export default {
  components: { JImportModal },
  data() {
    return { visible: false, timer: null, sceneList: [], memberName: '', showName: false, showFile: false, fileName: null, key: '' }
  },
  methods: {
    show() {
      this.visible = true
    },
    close() {
      this.visible = false
      this.fileName = ''
      this.memberName = ''
      this.showName = false
      this.showFile = false
    },
    // 导入
    handleImportXls() {
      this.$refs.importModal.show()
    },
    // 处理上传业务的后台地址
    getImportUrl() {
      return ''
    },
    getUploadParams() {
      // console.log({...globalData.uploadParams})
      return { ...globalData.uploadParams }
    },
    // 上传成功后的方法
    importOk(result, fileList) {
      console.log(fileList)
      this.fileName = ''
      this.key = ''
      let that = this
      queryUploadSuccess(this.timer, result, 60000, function(x, data) {
        console.log(x, data)
        if (x == 'done' || x == 'warning') {
          that.$refs.importModal.close()
        }
        if (x == 'done') {
          console.log(fileList, data)
          if (!data.url) {
            that.fileName = fileList[0].split('-')[1]
            that.key = result
            this.$message.success('导入成功！')
          }
        }
      })
    },
    templateUrl() {
      return 'https://img.bzhz.jnbygroup.com/cusLabelTemp.xlsx'
    },
    submit() {
      if (this.memberName == '') {
        this.showName = true
        return
      }
      if (!this.fileName) {
        this.showFile = true
        return
      }
      this.showName = false
      this.showFile = false
      let params = {
        requestData: {
          memberName: this.memberName,
          key: this.key
        }
      }
      marketingMemberAdd(params).then(res => {
        if (res.code == 0) {
          this.$message.success('成功')
          this.$emit('updateTable')
          this.close()
        } else {
          this.$message.warning(res.msg)
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.tip {
  color: #f5222c;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: -1px;
}
</style>

